<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星型图案</title>
    <style>
        body {
            font-family: 'Courier New', Courier, monospace;
            font-size: 30px;
        }

        .container {
            width: max-content;
            margin: 0 auto;
            background-color: rgb(243, 255, 175);
            padding: 20px 100px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container" id="starContainer"></div>
    <script>
        const container = document.getElementById('starContainer');
        // 蓝色星星部分（递增）
        for (let i = 1; i <= 5; i++) {
            let stars = '';
            for (let j = 1; j <= 2 * i - 1; j++) {
                stars += '*';
            }
            const starLine = document.createElement('div');
            starLine.style.color = 'blue';
            starLine.textContent = stars;
            container.appendChild(starLine);
        }
        // 红色星星部分（递减）
        for (let i = 5; i >= 1; i--) {
            let stars = '';
            for (let j = 1; j <= 2 * i - 1; j++) {
                stars += '*';
            }
            const starLine = document.createElement('div');
            starLine.style.color = 'red';
            starLine.textContent = stars;
            container.appendChild(starLine);
        }
    </script>
</body>
</html>